{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Slider Bootstrap{% endblock %}

{% block stylesheets %}    
    <link href="{{ asset('bundles/applicationtools/css/flexslider/flexslider.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationtools/css/flexslider/flexslider_carousel.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationtools/css/animate/animate.css') }}" rel="stylesheet" type="text/css" media="all" />
    
    <style type="text/css">
.flex-control-paging li a{
    display:inline-block;
    cursor:pointer;
    color:transparent;
    position:relative;
    background-color:transparent;
    border:2px solid transparent;
    text-indent:-9999px;
    width:18px;
    height:18px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%
}
.flex-control-paging li a:before{
    content:'';text-indent:-9999px;
    display:block;
    text-indent:-9999px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-3px;
    margin-top:-3px;
    background-color: #333;
    width:6px;
    height:6px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%
}
.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active{
     background: none;
     border-color: #333;
}
    </style>
    
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/flexslider/jquery.flexslider.js') }}" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(function(){
        SyntaxHighlighter.all();
      });
      $(window).load(function(){
    	//$('.flex-active-slide').addClass('active');
    	
        $('.flexslider').flexslider({
          animation: "fade"
        });
        
      });
    </script>
    
{% endblock %}

{% block body %}
 
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="{{ asset('bundles/applicationtools/images/1903x500.png') }}" />
		        <div class="carousel-caption">
                    <h1 class="fadeInUp animated">Example headline.</h1>
                    <p class="fadeInUp animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p class="fadeInRight animated"><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
		        </div>
            </li>
            <li>
                <img src="{{ asset('bundles/applicationtools/images/1903x500.png') }}" />
		        <div class="carousel-caption">
		            <h1 class="fadeInLeftBig animated">Another example headline.</h1>
                    <p class="fadeInRightBig animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p class="fadeInDownBig animated"><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
		        </div>
            </li>
            <li>
                <img src="{{ asset('bundles/applicationtools/images/1903x500.png') }}" />
		        <div class="carousel-caption">
		            <h1 class="fadeInRightBig animated">One more for good measure.</h1>
		            <p class="fadeInLeftBig animated">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		            <p class="fadeInUpBig animated"><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
		        </div>
            </li>
            <li>
                <img src="{{ asset('bundles/applicationtools/images/1903x500.png') }}" />
		        <div class="carousel-caption">
		            <h1>Example headline 2.</h1>
		            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		            <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
		        </div>
            </li>
        </ul>
    </div>
    <p>Template jednotka</p>
    <p>Slider ma dwie możliwości wywołania: slide(przezunięcie komórek z lewej do prawej) oraz fade.<br/> W przykładzie powyżej zastosowano fade.</p>
            
{% endblock %}